<template>
  <!--视图-->
  <div>

<!--    添加查询-->
    <el-form :inline="true" :model="formInlineSet" class="demo-form-inline">
      <el-form-item label="创建人姓名查询">
        <el-input v-model="formInlineSet.createName" placeholder="创建人姓名查询"></el-input>
      </el-form-item>

      <el-form-item label="创建人姓名查询">
        <el-date-picker
            v-model="valueDate"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            end-placeholder="结束日期"
        @change="dateAll">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
      </el-form-item>
    </el-form>
<!--    按钮-->
    <el-row>
      <el-button >朴素按钮</el-button>
      <el-button type="primary" @click="openAdd('')">添加</el-button>
      <el-button type="success" @click="getExcel">导出Excel</el-button>
      <el-button type="info" >信息按钮</el-button>
      <el-button type="warning" @click="openThree">签收列表</el-button>
      <el-button type="danger" @click="openStorage">空白</el-button>
    </el-row>
<!--    列表-->
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="工厂序号"
          width="60">
      </el-table-column>
      <el-table-column
          prop="name"
          label="工厂类型"
          width="120">
      </el-table-column>
      <el-table-column
          label="工厂地区"
          width="120">
        <template v-slot="s">
          {{s.row.bname}}>>{{s.row.cname}}>>{{s.row.dname}}
        </template>
      </el-table-column>
      <el-table-column
          prop="address"
          label="详细地址">
      </el-table-column>
      <el-table-column
          prop="sort"
          label="展示排序">
      </el-table-column>
      <el-table-column
          prop="createDate"
          label="创建时间">
      </el-table-column>
      <el-table-column
          prop="createName"
          label="创建人姓名">
      </el-table-column>
      <el-table-column
          prop="remarks"
          label="备注">
      </el-table-column>
      <el-table-column
          prop="contacts"
          label="联系人/负责人">
      </el-table-column>
      <el-table-column
          prop="telephone"
          label="联系人/负责人电话">
      </el-table-column>
      <el-table-column
          prop="state"
          label="状态1正常2，停用">
        <template v-slot="s">
        <el-switch
            v-model="s.row.status"
            active-value=2
            inactive-value=1
            active-color="#ff4949"
            inactive-color="#13ce66">
        </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          prop="contactEmail"
          label="工厂电子邮箱地址">
      </el-table-column>
      <el-table-column
          prop="totalArea"
          label="工厂面积/亩">
      </el-table-column>
      <el-table-column
          prop="safetyRatings"
          label="安全评级">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="deleteById(scope.row.id)" type="text" size="small">删除</el-button>
          <el-button @click="openAdd(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="openReceipt(scope.row)" type="text" size="small">负责人签收</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    分页-->
    <el-pagination
        @current-change="goPage"
        :page-size="5"
        layout="total, prev, pager, next ,jumper"
        :total="total">
    </el-pagination>

<!--    添加-->
    <el-dialog :title=userTitle :visible.sync="dialogFormVisible">
      <el-form :model="formaa">
        <el-form-item label="工厂名称" :label-width="formLabelWidth">
          <el-input v-model="formaa.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="请选择地区" :label-width="formLabelWidth">
          <el-cascader
              v-model="areaIds"
              :options="ares"
              :props="props"
              clearable
              @change="handleChange"></el-cascader>

        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth">
          <el-input v-model="formaa.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="展示排序" :label-width="formLabelWidth">
          <el-input v-model="formaa.sort" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="创建人姓名" :label-width="formLabelWidth">
          <el-input v-model="formaa.createName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系人/负责人" :label-width="formLabelWidth">
          <el-input v-model="formaa.contacts" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系人/负责人电话" :label-width="formLabelWidth">
          <el-input v-model="formaa.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工厂电子邮箱地址" :label-width="formLabelWidth">
          <el-input v-model="formaa.contactEmail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工厂面积/亩" :label-width="formLabelWidth">
          <el-input v-model="formaa.totalArea" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="安全评级:可为 1-10 的等级" :label-width="formLabelWidth">
          <el-input v-model="formaa.safetyRatings" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工厂选用器械" :label-width="formLabelWidth">
          <el-select v-model="formaa.postsAll" multiple placeholder="请选择">
            <el-option
                v-for="item in postsGet"
                :key="item.factoryId"
                :label="item.name"
                :value="item.factoryId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="formaa.remarks" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdate">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="签收表单" :visible.sync="dialogTableVisibleTwo" width="1500px">
      <el-table :data="gridData">
        <el-table-column property="logisticsId" label="货物序号" ></el-table-column>
        <el-table-column property="argpName" label="货物名称" ></el-table-column>
        <el-table-column property="specifications" label="规格" ></el-table-column>
        <el-table-column property="weight" label="重量"></el-table-column>
        <el-table-column property="goodsNum" label="货物数量"></el-table-column>
        <el-table-column property="senderName" label="发货人姓名"></el-table-column>
        <el-table-column property="senderPhone" label="发货人电话"></el-table-column>
        <el-table-column property="shippingStatus" label="签收状态"></el-table-column>
        <el-table-column property="trackingNumber" label="快递单号"></el-table-column>
        <el-table-column property="logisticsProvider" label="物流公司名称"></el-table-column>
        <!-- <el-table-column  label="请选择签收人">
          <el-select v-model="sibilityName.respon" placeholder="请选择签收人" width="300">
            <el-option
                v-for="item in responsibility"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>

        </el-table-column>-->

<!--        <el-col :span="24">-->
<!--          <el-form-item label="菜单类型" prop="menuType">-->
<!--            <el-radio-group v-model="formUpdate.menuType">-->
<!--              <el-radio label="M">目录</el-radio>-->
<!--              <el-radio label="C">菜单</el-radio>-->
<!--              <el-radio label="F">按钮</el-radio>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->
<!--        </el-col>-->

        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button @click="signForReceipt(scope.row)" type="text" size="small">确定签收</el-button>
            <el-button @click="refuseReceipt(scope.row)" type="text" size="small">拒绝签收</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>



    <el-dialog title="负责人签收信息" :visible.sync="dialogTableVisibleThree">
        <el-tabs type="border-card">
          <el-tab-pane label="已签收">
            <el-table :data="gridDataTwo">
              <el-table-column property="receiverName" label="已签收负责人" ></el-table-column>
              <el-table-column property="receiverPhone" label="联系电话" ></el-table-column>
              <el-table-column property="argpName" label="货物名称" ></el-table-column>
              <el-table-column property="specifications" label="规格" ></el-table-column>
              <el-table-column property="weight" label="重量"></el-table-column>
              <el-table-column property="goodsNum" label="货物数量"></el-table-column>
              <el-table-column property="senderName" label="发货人姓名"></el-table-column>
              <el-table-column property="senderPhone" label="发货人电话"></el-table-column>
              <el-table-column property="shippingStatus" label="签收状态"></el-table-column>
              <el-table-column property="trackingNumber" label="快递单号"></el-table-column>
              <el-table-column property="logisticsProvider" label="物流公司名称"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="待签收">
            <el-table :data="gridData">
              <el-table-column property="receiverName" label="待签收收负责人" ></el-table-column>
              <el-table-column property="receiverPhone" label="联系电话" ></el-table-column>
              <el-table-column property="argpName" label="货物名称" ></el-table-column>
              <el-table-column property="specifications" label="规格" ></el-table-column>
              <el-table-column property="weight" label="重量"></el-table-column>
              <el-table-column property="goodsNum" label="货物数量"></el-table-column>
              <el-table-column property="senderName" label="发货人姓名"></el-table-column>
              <el-table-column property="senderPhone" label="发货人电话"></el-table-column>
              <el-table-column property="shippingStatus" label="签收状态"></el-table-column>
              <el-table-column property="trackingNumber" label="快递单号"></el-table-column>
              <el-table-column property="logisticsProvider" label="物流公司名称"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="拒签收">
              <el-table :data="refuseData">
                <el-table-column property="receiverName" label="拒签收负责人" ></el-table-column>
                <el-table-column property="receiverPhone" label="联系电话" ></el-table-column>
                <el-table-column property="argpName" label="货物名称" ></el-table-column>
                <el-table-column property="specifications" label="规格" ></el-table-column>
                <el-table-column property="weight" label="重量"></el-table-column>
                <el-table-column property="goodsNum" label="货物数量"></el-table-column>
                <el-table-column property="senderName" label="发货人姓名"></el-table-column>
                <el-table-column property="senderPhone" label="发货人电话"></el-table-column>
                <el-table-column property="shippingStatus" label="签收状态"></el-table-column>
                <el-table-column property="trackingNumber" label="快递单号"></el-table-column>
                <el-table-column property="logisticsProvider" label="物流公司名称"></el-table-column>
              </el-table>
            </el-tab-pane>

        </el-tabs>
    </el-dialog>



  </div>
</template>

<script>
export default {
  name: "ArgpFactoryView",
  data() {//属性
    return {
      props: {
        value: 'id',
        label: 'cityName',
        children: 'children'
      },
      ares:[0,0,0],
      areaIds:[0,0,0],
      total:0,
      pageNum:1,
      valueDate:'',
      formInlineSet:{},
      formLabelWidth:'120px',
      formaa:{},
      dialogFormVisible:false,
      tableData:[],
      provinceId:'',
      cityId:'',
      areaId:'',
      userTitle:'添加工厂数据',//打开添加或修改时改变标题
      postsGet:[],
      postsAll:[],
      dialogTableVisibleTwo:false,
      gridData:[],
      responsibility:[],
      sibilityName:{},
      dialogTableVisibleStorage:false,
      gridDataStorage:[],
      //
      formLogistics:{},
      dataLogistics:[],
      dialogLogistics:false,
      activeName: '负责人签收状态列表信息',
      dialogTableVisibleThree:false,
      gridDataThree: '负责人签收状态列表信息',
      gridDataTwo:[],//待签收
      refuseData:[],//拒绝签收
      dataSignFor:{},
    }
  }, methods: {//自定义方法
    //拒绝签收
    refuseReceipt(rows){
      rows.receiverName =this.dataSignFor.contacts;
      rows.receiverPhone=this.dataSignFor.telephone;
      console.log(rows)
      console.log(this.dataSignFor)

      this.axios.post("system/factoryAndPosts/refuseReceipt",rows).then(res=>{
        this.$message.success(res.data.msg);
        this.dialogTableVisibleTwo=false;
        this.receiptList();
        this.list();
      })
    },
    //打开签收状态弹窗列表
    openThree(){//agricultural-product-auth
      //已签收列表
      this.receiptList();
      //待签收列表
      this.waitForList();
      //拒绝签收列表
      this.refuseList();
      this.dialogTableVisibleThree=true;
    },
    //拒绝签收的列表
    refuseList(){
      this.axios.post("system/factoryAndPosts/refuseList").then(res=>{
        this.refuseData=res.data.data;
      })
    },
    //待签收的列表
    waitForList(){
      this.axios.post("system/factoryAndPosts/waitForList").then(res=>{
        this.gridDataTwo=res.data.data;
      })
    },
    //确定已签收状态
    signForReceipt(rows){
      rows.receiverName =this.dataSignFor.contacts;
      rows.receiverPhone=this.dataSignFor.telephone;
      console.log(rows)
      console.log(this.dataSignFor)

      this.axios.post("system/factoryAndPosts/signForReceipt",rows).then(res=>{
        this.$message.success(res.data.msg);
        this.dialogTableVisibleTwo=false;
        this.receiptList();
        this.list();
      })
    },
    //签收人/负责人
    responsibilityList(){
      this.axios.post("system/factoryAndPosts/responsibility").then(res=>{
        this.responsibility=res.data.data;
      })
    },
    //打开签收列表
    openReceipt(res){
      this.dataSignFor=res;
      console.log(res);
      this.responsibilityList();
      this.receiptList();
      this.dialogTableVisibleTwo=true;
    },
    //未签收的列表
    receiptList(){
      this.axios.post("system/factoryAndPosts/receiptList").then(res=>{
        this.gridData=res.data.data;
      })
    },
    //导出Excel
    getExcel(){
      location.href='http://localhost:8888/system/argpFactory/getExcel';
    },
    //设备多对多类型数据
    postsList(){
      this.axios.post("system/factoryAndPosts/postsList").then(res=>{
        this.postsGet=res.data.data;
      })
    },
    //三级联动change
    handleChange(value){
      console.log(value);
      if(value.length>0){
        console.log("有值");
        this.formaa.provinceId=value[0];
        this.formaa.cityId=value[1];
        this.formaa.areaId=value[2];
      }else {
        console.log("没值")
      }
    },
    //三级联动赋值
    selectAllCity(){
      this.axios.post("system/tradesmanCity/selectAllCity").then(res=>{
        this.ares=res.data;
        console.log(res.data)
      })
    },
    //删除
    deleteById(id){
      this.axios.post("system/argpFactory/deleteById?id="+id).then(res=>{
        this.$message.success(res.data.msg);
        this.list();
      })
    },
    //分页
    goPage(res){
      this.pageNum=res;
      this.list();
    },
    //change事件时间区间查询
    dateAll(dateGet){
      this.valueDate=dateGet;
      if(this.valueDate!=null){
        this.formInlineSet.indate=this.valueDate[0];
        this.formInlineSet.outdate=this.valueDate[1];
      }else {
        this.formInlineSet.indate='';
        this.formInlineSet.outdate='';
      }
    },

    //执行添加
    addOrUpdate(res){
      console.log(res);

      this.axios.post("system/argpFactory/addOrUpdate",this.formaa).then(res=>{
        if(res.data.code==200){
          this.$message.success(res.data.msg);
          this.dialogFormVisible=false;
          this.list();
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },
    //打开添加
    openAdd(res){
      this.postsList();
      console.log('-------'+res)
      this.areaIds=[];//还原数据

      if(res){
        this.userTitle='修改工厂表';
        this.formaa=res;
        if(res.provinceId){
          this.areaIds.push(res.provinceId,res.cityId,res.areaId);
        }
        console.log(this.areaIds);
      }else {
        this.userTitle='添加工厂数据';
        this.formaa={},
            this.selectAllCity();
        // this.provinceList();

      }
      //打开弹窗
      this.dialogFormVisible=true;
    },
    //列表
    list(){
        this.axios.post("system/argpFactory/list?pageNum="+this.pageNum,this.formInlineSet).then(res=>{
          this.tableData=res.data.data.list;
          this.total=res.data.data.total;
        })
      }

  }, created() { //钩子函数
    this.list();
    this.postsList();
    this.selectAllCity();
    this.receiptList();
    this.responsibilityList();
    this.waitForList();//待签收列表
    this.refuseList();//拒绝签收列表

  }
}
</script>

<style scoped>

</style>